<template>
  <div v-show="tableContextMenu.show" class="context-select-modal" @click="clickModal">
    {{getInnerStyle()}}
    <div class="inner" :style="getInnerStyle()">
      <div @click="checkAll">全部勾选</div>
      <div @click="uncheckAll">全部取消</div>
      <div @click="oppositeCheck">反选</div>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    tableContextMenu () {
      return this.$store.state.app.tableContextMenu
    }
  },
  methods: {
    getInnerStyle () {
      let position = (this.tableContextMenu && this.tableContextMenu.position) || {}
      let x = position.x
      let y = position.y

      return {
        top: y + 'px',
        left: x + 'px'
      }
    },
    clickModal () {
      this.$store.commit('setTableContextMenu', {
        show: false
      })
    },
    checkAll () {
      this.tableContextMenu.checkAll()
    },
    uncheckAll () {
      this.tableContextMenu.uncheckAll()
    },
    oppositeCheck () {
      this.tableContextMenu.oppositeCheck()
    }
  }
}
</script>

<style lang="less" scoped>
.context-select-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0);
  z-index: 1000000;
  .inner {
    position: absolute;
    background: #fff;
    width: 100px;
    border: 1px solid #ccc;
    font-size: 12px;
    cursor: pointer;
    > div {
      line-height: 30px;
      padding: 0 10px;
      text-align: center;
      &:not(:first-child) {
        border-top: 1px solid #ccc;
      }
      &:hover {
        background: @primary-color;
        color: #fff;
      }
    }
  }
}
</style>
